<template>
  <el-card class="bank-info-card" shadow="hover">
    <template #header>
      <div class="card-header">
        <h3>
          <el-icon><CreditCard /></el-icon>
          银行账户信息
        </h3>
      </div>
    </template>
    
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="4" animated />
    </div>
    
    <div v-else-if="hasBankInfo" class="bank-info">
      <div class="info-row">
        <div class="info-label">银行名称</div>
        <div class="info-value highlight">{{ bankInfo.banks_name }}</div>
      </div>
      <div class="info-row">
        <div class="info-label">支行名称</div>
        <div class="info-value">{{ bankInfo.banks_branch }}</div>
      </div>
      <div class="info-row">
        <div class="info-label">账户类型</div>
        <div class="info-value">{{ bankInfo.account_type }}</div>
      </div>
      <div class="info-row">
        <div class="info-label">账户号码</div>
        <div class="value-with-action">
          <span class="info-value card-number">{{ showFullCardNumber ? bankInfo.banks_card : maskAccountNumber(bankInfo.banks_card) }}</span>
          <el-button type="primary" link size="small" @click="toggleCardNumberVisibility">
            <el-icon>
              <component :is="showFullCardNumber ? 'Hide' : 'View'" />
            </el-icon>
            {{ showFullCardNumber ? '隐藏' : '显示' }}
          </el-button>
        </div>
      </div>
      <div class="info-row">
        <div class="info-label">账户持有人</div>
        <div class="info-value">{{ bankInfo.banks_user }}</div>
      </div>
    </div>
    
    <div v-else class="no-bank-info">
      <el-empty description="暂无银行账户信息">
        <el-button type="primary" @click="goToBankAccount">立即添加</el-button>
      </el-empty>
    </div>
  </el-card>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { CreditCard, View, Hide } from '@element-plus/icons-vue'

const props = defineProps({
  bankInfo: {
    type: Object,
    default: () => ({})
  },
  loading: {
    type: Boolean,
    default: false
  }
})

const router = useRouter()
const showFullCardNumber = ref(false)

// 计算是否有银行信息
const hasBankInfo = computed(() => {
  return props.bankInfo && props.bankInfo.banks_id
})

// 掩码银行卡号，只显示后四位
const maskAccountNumber = (accountNumber) => {
  if (!accountNumber) return ''
  const length = accountNumber.length
  if (length <= 4) return accountNumber
  
  const lastFour = accountNumber.slice(-4)
  const maskedPart = '*'.repeat(length - 4)
  return maskedPart + lastFour
}

// 切换银行卡号显示/隐藏
const toggleCardNumberVisibility = () => {
  showFullCardNumber.value = !showFullCardNumber.value
}

// 跳转到银行账户页面
const goToBankAccount = () => {
  router.push('/user/bankaccount')
}
</script>

<style scoped>
.bank-info-card {
  margin-top: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
}

.loading-container {
  padding: 20px 0;
}

.bank-info {
  padding: 10px 0;
}

.info-row {
  display: flex;
  border-bottom: 1px solid #eee;
  padding: 12px 0;
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  width: 120px;
  color: #606266;
  font-weight: 500;
}

.info-value {
  flex: 1;
  color: #333;
}

.highlight {
  color: #409EFF;
  font-weight: 500;
}

.card-number {
  font-family: monospace;
  letter-spacing: 1px;
}

.value-with-action {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.value-with-action .el-button {
  padding: 4px 8px;
  font-size: 12px;
  height: 24px;
}

.value-with-action .el-button .el-icon {
  margin-right: 4px;
  font-size: 12px;
}

.no-bank-info {
  padding: 30px 0;
}
</style>